﻿<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="all">
    <title></title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="new/css/bootstrap.min.css">
    <!-- Customizable CSS -->
    <link rel="stylesheet" href="new/css/main.css">
    <link rel="stylesheet" href="new/css/blue.css">
    <link rel="stylesheet" href="new/css/owl.carousel.css">
    <link rel="stylesheet" href="new/css/owl.transitions.css">
    <link rel="stylesheet" href="new/css/animate.min.css">
    <link rel="stylesheet" href="new/css/rateit.css">
    <link rel="stylesheet" href="new/css/bootstrap-select.min.css">
    <link href="new/css/lightbox.css" rel="stylesheet">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="new/css/font-awesome.css">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Barlow:200,300,300i,400,400i,500,500i,600,700,800"
          rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700,700italic,800'
          rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <style>
        /* 在引入的css文件中写入这个*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body class="cnt-home">
<div id="detailContent" v-cloak>
    <!-- ============================================== HEADER ============================================== -->
    <header class="header-style-1">

        <!-- ============================================== TOP MENU ============================================== -->
        <div class="top-bar animate-dropdown">
            <div class="container">
                <div class="header-top-inner">
                    <div class="cnt-account">
                        <ul class="list-unstyled">
                            <li class="wishlist"><a href="index.html"><span>首页</span></a></li>
                            <li v-if="isLogin" class="check"><a href="javascript:;" @click="logout"><span>退出</span></a>
                            </li>
                            <li v-else class="login"><a href="Login.html"><span>登录</span></a></li>
                        </ul>
                    </div>

                    <div v-if="isLogin" class="cnt-block">
                        <ul class="list-unstyled list-inline">
                            <li class="dropdown dropdown-small"><a href="#" class="dropdown-toggle"
                                                                   data-hover="dropdown" data-toggle="dropdown"><span
                                    class="value">欢迎你：{{nickName}}</span><b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="MyCart.html">我的预约</a></li>
                                    <li><a href="MyFocus.html">我的关注</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!-- /.header-top-inner -->
            </div>
            <!-- /.container -->
        </div>
        <!-- /.header-top -->
        <!-- ============================================== TOP MENU : END ============================================== -->
        <div class="main-header">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-3 logo-holder">
                        <!-- ============================================================= LOGO ============================================================= -->
                        <div class="logo"><a href="index.html"> <img src="new/images/logo.png" alt="logo"> </a></div>
                        <!-- /.logo -->
                        <!-- ============================================================= LOGO : END ============================================================= -->
                    </div>
                    <!-- /.logo-holder -->

                    <div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 top-search-holder">
                        <!-- /.contact-row -->
                        <!-- ============================================================= SEARCH AREA ============================================================= -->
                        <div class="search-area">
                            <form>
                                <div class="control-group">
                                    <ul class="categories-filter animate-dropdown">
                                        <a class="dropdown-toggle" data-toggle="dropdown"  href="#">搜索</a>
                                    </ul>
                                    <input class="search-field" v-model="searchValue"  placeholder="请输入要搜索的家政服务"/>
                                    <a class="search-button" href="#" @click="searchName"  ></a></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="breadcrumb">
        <div class="container" style="margin-top: 10px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/Index.html' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{infoDetail.typeName}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{infoDetail.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div><!-- /.container -->
    </div><!-- /.breadcrumb -->
    <div class="body-content outer-top-xs">
        <div class='container'>
            <div class='row single-product'>
                <div class='col-xs-12 col-sm-12 col-md-9 rht-col' style="margin-left: 180px;">
                    <el-card class="box-card">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 gallery-holder">
                                <div class="product-item-holder size-big single-product-gallery small-gallery">

                                    <div id="owl-single-product">
                                        <el-carousel loop height="300px">
                                            <el-carousel-item v-for="item in infoDetail.list"  :key="item">
                                                <img class="img-responsive" alt="" :src="item.imgPath"
                                                     :onerror="item.imgPath"
                                                     :data-echo="item.imgPath"/>
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div><!-- /.single-product-slider -->

                                </div><!-- /.single-product-gallery -->
                            </div><!-- /.gallery-holder -->
                            <div class='col-sm-12 col-md-8 col-lg-8 product-info-block'>

                                <div class="product-info">
                                    <h3 class="name">{{infoDetail.title}}</h3>

                                    <div class="stock-container info-container m-t-10">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="stock-box">
                                                    <h4>联系人 : {{infoDetail.userName}}</h4>
                                                </div>
                                                <div class="stock-box">
                                                    <h4>健康情况 :
                                                        <el-tag size="small" type="success">{{infoDetail.heathName}}
                                                        </el-tag>
                                                    </h4>
                                                </div>
                                            </div>
                                        </div><!-- /.row -->
                                    </div><!-- /.stock-container -->

                                    <div class="description-container m-t-20">
                                        <p>家政简介:{{infoDetail.content}}</p>
                                    </div><!-- /.description-container -->

                                    <div class="price-container info-container m-t-30">
                                        <div class="row">
                                            <div class="col-sm-6 col-xs-6">
                                                <div class="price-box">
                                                    <span class="price">￥{{infoDetail.newMoney}}</span>
                                                    <span class="price-strike">￥{{infoDetail.oldMoney}}</span>
                                                </div>
                                            </div>

                                            <div class="col-sm-6 col-xs-6">
                                                <div class="favorite-button m-t-5">
                                                    <a class="btn btn-primary" data-toggle="tooltip"
                                                       data-placement="right" @click="addLike(infoDetail.id)"
                                                       title="添加关注" href="#">
                                                        <i style="color: red" class="fa fa-heart"></i>
                                                    </a>
                                                </div>
                                            </div>

                                        </div><!-- /.row -->
                                    </div><!-- /.price-container -->

                                    <div class="quantity-container info-container">
                                        <div class="row">
                                            <div class="add-btn">
                                                <a href="#" @click="addCart(infoDetail.id)" class="btn btn-success"> 预约服务</a>
                                            </div>
                                        </div><!-- /.row -->
                                    </div><!-- /.quantity-container -->


                                </div><!-- /.product-info -->

                            </div><!-- /.col-sm-7 -->
                        </div><!-- /.row -->
                    </el-card>
                </div><!-- /.col -->
                <div class="clearfix"></div>
            </div><!-- /.row -->
        </div>
    </div>

    <footer id="footer" class="footer color-bg">
        <div class="copyright-bar">
            <div class="container">
                <div class="col-xs-12 col-sm-4 no-padding copyright">Copyright &copy; 2020.
                </div>
            </div>
        </div>
    </footer>
</div>
<script src="js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/2.3/layer.js"></script>

<script src="new/js/bootstrap.min.js"></script>

<script src="new/js/bootstrap-hover-dropdown.min.js"></script>
<script src="new/js/owl.carousel.min.js"></script>

<script src="new/js/echo.min.js"></script>
<script src="new/js/jquery.easing-1.3.min.js"></script>
<script src="new/js/bootstrap-slider.min.js"></script>
<script src="new/js/jquery.rateit.min.js"></script>
<script src="new/js/lightbox.min.js"></script>
<script src="new/js/bootstrap-select.min.js"></script>
<script src="new/js/wow.min.js"></script>
<script src="new/js/scripts.js"></script>

<script src="js/common.js"></script>
<script>
    var vm = new Vue({
        el: "#detailContent",
        data: {
            infoId: '',
            categoryId: '',
            categoryName: '',
            isLogin: false,
            userId: '',
            nickname: '',
            infoDetail: {},
            searchValue:''
        },
        created: function () {
            var vms = this;
            vms.getInfoId()
            vms.checkUser();
            vms.getInfoDetail();
        }, //属性过滤器

        methods: {
            searchName(){
                window.localStorage.setItem("searchValue",this.searchValue);
                window.location.href="Category.html";
            },
            addLike(infoId) {
                if (!this.isLogin){
                    layer.msg("您尚未登录，请先登录!", {icon: 2, time: 2000});
                    return false;
                }
                HttpPost("/order/save/" + infoId + "/" + 0, null, function (res) {
                    if (res.result == true) {
                        layer.msg("关注成功", {icon: 1, time: 2000});
                    } else {
                        layer.msg("您已经关注过了", {icon: 2, time: 2000});
                    }
                })
            },
            addCart(infoId) {
                if (!this.isLogin){
                    layer.msg("您尚未登录，请先登录!", {icon: 2, time: 2000});
                    return false;
                }
                HttpPost("/order/save/" + infoId + "/" + 1, null, function (res) {
                    if (res.result == true) {
                        layer.msg("预约成功", {icon: 1, time: 2000});
                    } else {
                        layer.msg("您已经预约过了。", {icon: 2, time: 2000});
                    }
                })
            },
            getInfoId() {
                const infoId = window.localStorage.getItem("infoId")
                this.infoId = infoId;
            },
            checkUser: function () {
                var that = this;
                const isLogin = window.localStorage.getItem("isLogin");
                if (isLogin) {
                    that.userId = window.localStorage.getItem("userId");
                    that.nickName = window.localStorage.getItem("nickName");
                    that.isLogin = true;
                }else{
                    that.isLogin = false;
                }
            },
            logout: function () {
                window.localStorage.clear();
                window.location.href = "index.html";
            },
            getInfoDetail() {
                const that = this;
                HttpGet("/info/getDetail/" + that.infoId, null, function (res) {
                    if (res.result == true) {
                        that.infoDetail = res.data;
                    }
                })
            },
            toCart(id) {
                const that = this;
                const status = 1;
                HttpPost("/order/" + id + "/" + status, null, function (res) {
                    if (res.result == true) {
                        layer.msg("添加订单成功！", {icon: 1, time: 1500});
                    } else {
                        layer.msg("添加订单失败！", {icon: 2, time: 1500});
                    }
                })
            },
            toLike(id) {
                const that = this;
                const status = 10;
                HttpPost("/order/" + id + "/" + status, null, function (res) {
                    if (res.result == true) {
                        layer.msg("添加关注成功！", {icon: 1, time: 1500});
                    } else {
                        layer.msg("添加关注失败！", {icon: 2, time: 1500});
                    }
                })
            }

        },


    });
</script>
</body>
</html>

